<template>
	<view class="vipcard">
		<view class="background"></view>
		<view class="card">
			<view class="light">
			</view>
			<text class="number">{{userId}}</text>
			<text class="vip">VIP</text>
		</view>
		<uqrcode id="qrcode" :willReadFrequency="true" ref="uqrcode" canvas-id="qrcode" :value="userId"
			:options="{ margin: 10 }"></uqrcode>
		<view class="tip" style="text-align: center;">
			<text>可出示二维码</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userId: '',
			}
		},
		onLoad(options) {
			this.userId = JSON.parse(window.localStorage.getItem("user"));
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.vipcard {
		padding-top: 100rpx;
	}

	.background {
		position: absolute;
		top: -300rpx;
		left: -10%;
		width: 120%;
		height: 600rpx;
		border-radius: 50%;
		background-color: #e89abe;
		z-index: -1;
	}

	#qrcode {
		margin: 100rpx auto;
	}

	.card {
		width: 85%;
		height: 350rpx;
		background: url('../../../static/image/cardback.jpg') no-repeat;
		background-size: cover;
		background-position: bottom;
		margin: 0 auto;
		box-shadow: -10rpx 10rpx 20rpx #e8b1d0,
			10rpx -10rpx 20rpx #e8b1d0,
			-10rpx -10rpx 20rpx #e8b1d0,
			10rpx 10rpx 20rpx #e8b1d0;
		overflow: hidden;
		position: relative;
		border-radius: 60rpx;

		.light {
			position: absolute;
			top: -180rpx;
			left: -180rpx;
			width: 400rpx;
			height: 400rpx;
			background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
			transform: rotateZ(-135deg);
		}

		.number {
			position: absolute;
			text-align: center;
			width: 100%;
			bottom: 20rpx;
			color: white;
			text-shadow: 4rpx 4rpx 4rpx black;
			font-size: 40rpx;
			font-weight: 600;
		}

		.vip {
			position: absolute;
			right: 50rpx;
			top: 40rpx;
			font-size: 50rpx;
		}
	}
</style>